<#assign title='个人主页'>
<#include 'header.ftl'>
<div class="box">
    <div class="info layui-col-md3 layui-col-sm3 layui-col-xs6">
      <div class="image">
        <img src="${root}${_USER.cover!'/static/image/body.png'}" title="修改头像" width="100%">
      </div>
      <div class="intro">
        <ul class="text-center">
          <li>姓名：${_USER.name!"用户名"}</li>
          <li>职称：${_USER.duty.name!"暂无职位"}</li>
          <li>工号：${_USER.jobNum!'*****'}</li>
          <li>部门：${_USER.college.name!'默认学院'}[${_USER.department.name!"默认部门"}]</li>
        </ul>
      </div>
    </div>
    <!--功能卡片区-->
    <div class="items layui-col-md9 layui-col-sm9 layui-col-xs12">

      <div class="box-item layui-col-md3 layui-col-xs3 layui-col-sm3">
        <div class="bg layui-bg-green">
          <a href="javascript:" id="write-record">
            <div class="img-response">
              <img src="${root}/static/image/txjl.png">
            </div>
            <div class="text-center">
              填写业绩
            </div>
          </a>
        </div>
      </div>

      <div class="box-item layui-col-md3 layui-col-xs3 layui-col-sm3">
        <div class="bg bg-blue">
          <a href="${root}/record">
            <div class="img-response">
              <img src="${root}/static/image/whcg.png">
            </div>
            <div class="text-center">
              个人记录
            </div>
          </a>
        </div>
      </div>

      <div class="box-item layui-col-md3 layui-col-xs3 layui-col-sm3">
        <div class="bg layui-bg-cyan">
          <a href="${root}/setting">
            <div class="img-response">
              <img src="${root}/static/image/set.png">
            </div>
            <div class="text-center">
              信息修改
            </div>
          </a>
        </div>
      </div>

      <@shiro.hasAnyRoles name="admin,college-admin">
        <!--管理功能区-->
        <div class="layui-col-md12 layui-col-xs12 layui-col-lg12">
          <div class="box-item layui-col-md3 layui-col-xs3 layui-col-sm3">
            <div class="bg layui-bg-red">
              <a href="${root}/admin/incident">
                <div class="img-response">
                  <img src="${root}/static/image/add.png">
                </div>
                <div class="text-center">
                  评定事务
                </div>
              </a>
            </div>
          </div>

          <#--不同权限不一样的区域-->
          <div class="layui-col-md9 layui-col-sm9 layui-col-xs9">
            <div class="box-item layui-col-md4 layui-col-xs4 layui-col-sm4">
              <div class="bg-2 layui-bg-black">
                <a href="${root}/admin/data">
                  <div class="img-response-2">
                    <img src="${root}/static/image/data.png">
                    <span>评定记录</span>
                  </div>
                </a>
              </div>
            </div>

            <div class="box-item layui-col-md4 layui-col-xs4 layui-col-sm4">
              <div class="bg-2 layui-bg-orange">
                <a href="${root}/admin/users">
                  <div class="img-response-2">
                    <img src="${root}/static/image/user.png">
                    <span>用户管理</span>
                  </div>
                </a>
              </div>
            </div>

            <@shiro.hasRole name="admin">
            <div class="box-item layui-col-md4 layui-col-xs4 layui-col-sm4">
              <div class="bg-2 layui-bg-black">
                <a href="${root}/admin/items">
                  <div class="img-response-2">
                    <img src="${root}/static/image/items.png">
                    <span>业绩条目</span>
                  </div>
                </a>
              </div>
            </div>

            <div class="box-item layui-col-md4 layui-col-xs4 layui-col-sm4">
              <div class="bg-2 layui-bg-blue">
                <a href="${root}/admin/college">
                  <div class="img-response-2">
                    <img src="${root}/static/image/college.png">
                    <span>学院管理</span>
                  </div>
                </a>
              </div>
            </div>

            <div class="box-item layui-col-md4 layui-col-xs4 layui-col-sm4">
              <div class="bg-2 layui-bg-cyan">
                <a href="${root}/admin/dept">
                  <div class="img-response-2">
                    <img src="${root}/static/image/dept.png">
                    <span>部门管理</span>
                  </div>
                </a>
              </div>
            </div>

            <div class="box-item layui-col-md4 layui-col-xs4 layui-col-sm4">
              <div class="bg-2 layui-bg-green">
                <a href="${root}/admin/duty">
                  <div class="img-response-2">
                    <img src="${root}/static/image/duty.png">
                    <span>职位管理</span>
                  </div>
                </a>
              </div>
            </div>
            </@shiro.hasRole>
          </div>

        </div>
      </@shiro.hasAnyRoles>
    </div>
</div>

<link rel="stylesheet" href="${root}/static/layui/css/cropper.css">
<script>
  layui.config({base: '${root}/static/layui/modu/'})
      .use(['layer', 'jquery', 'laytpl', 'form', 'croppers'], function () {
    var $ = layui.$;
    var form = layui.form;
    var layer = layui.layer;
    var laytpl = layui.laytpl;
    var croppers = layui.croppers;

    var $img = $('.image > img');
    croppers.render({
      elem: '.image > img',
      saveW: 257,
      saveH: 360,
      mark: 257/360,
      area: ['700px', '500px'],
      url: '${root}/user/c/upload',
      done: function (url) {
        $img.attr('src',url);
      }
    });

    var items = [];
    var $write = $('#write-record');

    $write.click(function (e) {
      saveAndUpdateRecord(items, $, form, layer, laytpl);
    });
  });
</script>

<#include 'footer.ftl'>